<script>
export default {
  data() {
    return {
      good: {},
      goodsproduct: {},
      status: [],
      goodcombo: [],
      user: {username: "张三"},
      reviewstatus: null,
    }
  },
  methods: {
    // 返回
    fh() {
      history.back();
    },
    // 审核通过
    submitForm() {
      this.axios.post(`http://localhost:8000/xm-goods/goods-list/update`, this.good).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '审核通过',
            type: 'success'
          })
        } else {
          this.$message({
            message: '审核失败',
            type: 'error'
          })
        }
        this.$router.push('/goods')
      })
    },
// 取消
    cancel() {
      this.$router.push('/goods')
    }
    ,
// 分割套餐的内容
    fg(x) {
      return x.split(',');
    }
    ,
// 进入页面加载
    one() {
      var id = localStorage.getItem('goodid');
      localStorage.removeItem("goodid")
      this.axios.get(`http://localhost:8000/xm-goods/goods-list/findbyid?id=${id}`).then(res => {
        if (res.data.code == 200) {
          this.good = res.data.data;
          this.good.reviewer = this.user.username;
          this.reviewstatus = this.good.reviewstatus
        } else {
          this.$message({
            message: '回显失败',
            type: 'error'
          })
        }
      })
      this.axios.get(`http://localhost:8000/xm-goods/goods-products/findbyid?id=${id}`).then(res => {
        if (res.data.code == 200) {
          this.goodsproduct = res.data.data;
          this.status = this.goodsproduct.goodLabel.split(',');
        } else {
          this.$message({
            message: '回显失败',
            type: 'error'
          })
        }
      })
      if (this.goodtype != '单品') {
        this.axios.get(`http://localhost:8000/xm-goods/goods-list/findbyidcombo?id=${id}`).then(res => {
          if (res.data.code == 200) {
            this.goodcombo = res.data.data;
          } else {
            this.$message({
              message: '回显失败',
              type: 'error'
            })
          }
        })
      }
    }
    ,
  },
  created() {
    this.one();
  }
  ,
}
</script>

<template>
  <div class="goodxq" style="width: 85%;">
    <h3 style="margin-top: 10px;margin-bottom: 10px"><i class="el-icon-document-copy" style="margin-right: 10px"></i>商品详情
    </h3>
    <div style="display: flex;height: 170px;padding: 0.5%;background-color: #F4F6FD">
      <div style="width: 29%;">
        <img :src="good.goodsimage" height="150px">
      </div>
      <div style="width: 69%;">
        <div>
          <div style="display: grid;grid-template-columns: repeat(3, 1fr);height: 50px">
            <div>商品id：{{ good.id }}</div>
            <div>商品编号：{{ good.id }}</div>
            <div>创建时间：{{ good.createtime }}</div>
          </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(3, 1fr);height: 50px">
          <div>商品名称：{{ good.item }}</div>
          <div>商品分类：{{ good.classification }}</div>
          <div>修改时间：{{ good.updatetime }}</div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr);height: 50px">
          <div>商品状态：{{ good.status == 0 ? '未在售' : '在售中' }}</div>
          <div>所属店铺：{{ good.shop }}</div>
          <div></div>
        </div>
      </div>
    </div>

    <h4 style="margin-top: 20px">商品信息</h4>
    <div style="display: flex;margin-top: 10px;width: 100%;">
      <div style="width: 32%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
        <p style="font-weight: bold;margin-bottom: 30px">商品描述</p>
        <p style="margin-bottom: 30px">商品类型：{{ good.goodtype }}</p>
        <p style="margin-bottom: 30px">商品描述：{{ good.gooddescribe }}</p>
        <p style="margin-bottom: 30px">商品主料：{{ good.mainingredient }}</p>
        <p style="margin-bottom: 30px">制作时长：{{ good.makeTime }}分钟</p>
        <p style="margin-bottom: 30px">过期日期：{{ good.expirationDate }}</p>
      </div>
      <div style="width: 32%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
        <p style="font-weight: bold;margin-bottom: 30px">规格属性</p>
        <div v-if="this.good.goodtype=='套餐'">
          <div v-for="g in goodcombo" style="margin-bottom: 30px">
            <div style="display: flex;">
              <div style="width: 120px;">{{ g.packageName }}：</div>
              <div>
                <div style="width: 220px;margin-bottom: 15px" v-for="g2 in fg(g.pack)">{{ g2 }}/{{ good.inventory }}份
                </div>
              </div>
            </div>
          </div>
        </div>
        <p style="margin-bottom: 30px">商品属性：{{ goodsproduct.goodType }}</p>
        <p style="margin-bottom: 30px">商品标签：
          <button v-for="a in status" style="margin-right: 5px">{{ a }}</button>
        </p>
        <p style="margin-bottom: 30px">价格：￥{{ good.price }}</p>
        <p style="margin-bottom: 30px" v-if="this.good.goodtype=='单品'">库存数量：{{ good.inventory }}</p>
        <p style="margin-bottom: 30px">打包费：{{ good.packingfee }}</p>
      </div>
      <!--      <div v-if="this.good.goodtype=='套餐'" style="width: 32%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">-->
      <!--        <p style="font-weight: bold;margin-bottom: 30px">规格属性</p>-->
      <!--        -->
      <!--      </div>-->
      <div style="width: 32%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
        <p style="font-weight: bold;margin-bottom: 30px">其他信息</p>
        <div v-if="this.good.goodtype=='套餐'">
          <p style="margin-bottom: 30px">是否限时开放：{{ good.isTimeLimitedSale }}</p>
          <p style="margin-bottom: 30px">
            每天开售时间：{{ good.dailySaleStartTimeAm }}-{{ good.dailySaleStartTimePm }}</p>
          <p style="margin-bottom: 30px">是否限量供应：{{ good.isLimitedSupply }}</p>
          <p style="margin-bottom: 30px">每日供应量：{{ good.dailySupplyQuantity }}份</p>
        </div>
        <p style="margin-bottom: 30px">是否新品：{{ goodsproduct.newProductFlag }}</p>
        <p style="margin-bottom: 30px">是否促销：{{ goodsproduct.isOnSale }}</p>
        <p style="margin-bottom: 30px">促销折扣：{{ goodsproduct.promotionDiscount }}%</p>
        <p style="margin-bottom: 30px">
          生效日期：{{ goodsproduct.startDateEffective }}至{{ goodsproduct.endDateEffective }}</p>
        <p style="margin-bottom: 30px">每人每天限购：{{ goodsproduct.purchaseLimit }}份</p>
        <p style="margin-bottom: 30px">
          促销时段：{{ goodsproduct.startAmTime }}-{{ goodsproduct.endAmTime }},{{
            goodsproduct.startPmTime
          }}-{{ goodsproduct.endPmTime }}</p>
      </div>
    </div>
    <div v-if="this.reviewstatus==0">
      <el-card class="box-card" style="margin-top: 20px;box-shadow: none;border-color: #FFFFFF">
        <div slot="header" class="clearfix">
          <span>审核意见</span>
        </div>
        <el-form ref="form" :model="good" label-width="120px">
          <el-form-item label="当前审核人：">
            <el-input v-model="good.reviewer" style="width: 300px;" disabled></el-input>
          </el-form-item>
          <el-form-item label="审核结果：">
            <el-radio-group v-model="good.reviewstatus">
              <el-radio label="2">审核通过</el-radio>
              <el-radio label="3">审核拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="good.reviewstatus === '3'" label="拒绝原因：">
            <el-select v-model="good.reasonsforrejection" placeholder="请选择原因">
              <el-option label="原因1" value="原因1"></el-option>
              <el-option label="原因2" value="原因2"></el-option>
              <!-- 添加更多拒绝原因选项 -->
            </el-select>
          </el-form-item>
          <el-form-item label="补充说明：">
            <el-input style="width: 70%;" v-model="good.supplementaryexplanation"
                      placeholder="请输入补充说明"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!--    审核通过信息-->
    <div v-if="this.reviewstatus!=0">
      <h4 style="margin-top: 10px">审核意见</h4>
      <el-card class="box-card" style="margin-top: 10px;box-shadow: none;border-color: #FFFFFF">
        <div v-if="this.good.reviewstatus==3">
          <p style="margin-bottom: 30px">提交时间：{{ good.submissiontime }}</p>
          <p style="margin-bottom: 30px">审核人：{{ good.reviewer }}</p>
          <p style="margin-bottom: 30px">审核结果：拒绝</p>
          <p style="margin-bottom: 30px">拒绝原因：{{ good.reasonsforrejection }}</p>
          <p style="margin-bottom: 30px">补充说明：{{ good.supplementaryexplanation }}</p>
        </div>
        <div v-if="this.good.reviewstatus==2">
          <p style="margin-bottom: 30px">提交时间：{{ good.submissiontime }}</p>
          <p style="margin-bottom: 30px">审核时间：{{ good.updatetime }}</p>
          <p style="margin-bottom: 30px">审核人：{{ good.reviewer }}</p>
          <p style="margin-bottom: 30px">审核结果：通过</p>
        </div>
      </el-card>
      <el-button type="primary" @click="fh()">返回</el-button>
    </div>
  </div>
</template>

<style>

</style>
